<template>
  <div class="tab-nav flex" v-if="navList && navList.length > 0">
    <div
      class="nav-item flex f-d-c f-jc-c f-ai-c"
      :class="item.path === currentPath ? 'choosed' : ''"
      v-for="item in navList"
      :key="item.navName"
      @click="handleClickNav(item)"
    >
      <i :class="['iconfont', item.icon]"></i>
      <span class="nav-name">{{ item.navName }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "TabNav",
  props: {
    currentPath: {
      type: String,
      default: () => ""
    },
    navList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleClickNav(item) {
      const path = item.path;
      this.$router.replace(path);
    }
  }
};
</script>

<style scoped lang="less">
.tab-nav {
  border-top: 2px solid whitesmoke;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: white;
  .nav-item {
    flex-grow: 1;
    height: 100%;
    .iconfont {
      font-size: 7vw;
      color: #333333;
    }
    .nav-name {
      margin-top: 0.5vh;
      font-size: 2vw;
    }
  }
  .choosed {
    * {
      color: orangered !important;
    }
  }
}
</style>
